<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>order_list</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../css/css.css">
		<style type="text/css">
			.mui-control-content {
				/*background-color: white;
				min-height: 215px;*/
			}
			
			.mui-control-content {
				/*background-color: white;
				min-height: 215px;*/
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-title {
				color: #353535;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background: #ffffff;
			}
			
			.mui-bar {
				background: #ffffff;
			}
			
			.mui-bar-nav {
				top: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-bar {
				border-bottom: 1px solid #E4E4E4;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-content {
				background: #f6f6f6;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				/*	margin-bottom: 0.133rem;*/
				background-color: #1C83FC;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #1C83FC;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 1.28rem;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: none;
			}
			
			.mui-bar .mui-title {
				font-size: 0.48rem;
				font-family: 'PingFangSC-Semibold';
			}
			
			.mui-col-xs-4 {
				width: 25%;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				position: fixed;
				z-index: 999;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				position: fixed;
				top: 2.453rem
			}
			
			.mui-slider .mui-slider-group {
				margin-top: 1.57rem;
			}
			
			.mui-scroll-wrapper {
				position: static;
			}
			
			.mui-scroll {
				position: static;
			}
			
			.mui-table-view-cell {
				padding: 0;
				margin-bottom: 0.2667rem;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #ffffff!important;
			}
			
			.mui-table-view {
				background: #f6f6f6;
			}
			
			.mui-table-view-cell {
				position: static;
				background: #ffffff;
			}
			
			.mui-segmented-control .mui-control-item {
				font-size: 0.4rem;
			}
			
			html,
			body {
				height: 100%;
				background-color: #f6f6f6;
			}
			
			.top_nav {
				height: 50px;
				background-color: #FFFFFF;
				position: fixed;
				top: 44px;
				left: 0;
				z-index: 1000;
				padding: 0 15px;
				width: 100%;
			}
			
			.top_bg {
				height: 60px;
				background-color: #F6F6F6;
			}
			
			.top_nav_item {
				width: 25%;
				float: left;
				height: 50px;
				text-align: center;
				line-height: 50px;
				border-bottom: 1px solid transparent;
			}
			
			.top_nav .active {
				border-bottom: 1px solid #007aff;
			}.text_line{
				width:100%;
    height: 1.067rem;
    line-height: 1.067rem;
    color: #353535;
    font-size: 0.293rem;
 
			}
			.order_list_info_bottom{
				height: auto;
			}
			.order_list_info_top_text{
				width: 100%;
			}
		</style>
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>
		<div class="mui-content" id="order">

			 
			<div class="mui-scroll-wrapper">

				 
							<div class="order_list_info_top">
								<div class="order_list_info_top_text">订单编号：{{order_detail.order_no}}</div>
								<!--<div class="order_list_info_top_state " style="text-align: left;">{{order_detail.status|status_to_name}}</div>-->
							</div>
							<div class="order_list_info_container" v-for="orders in order_detail.goods">
								<div class="order_list_info_container_img">
									<img :src="orders.pic" />
								</div>
								<div class="order_list_info_container_right">
									<div class="order_list_info_container_right_text">{{orders.name}}</div>
									<div class="order_list_info_container_right_num">X {{orders.num}}</div>
									<div class="order_list_info_container_right_price">￥{{orders.price}}</div>
								</div>
							</div>
							
							<div class="order_list_info_bottom">

								<div class="order_list_info_bottom_productNum">共{{order_detail.num}}件商品</div>
								<div class="order_list_info_bottom_productAdd">合计</div>
								<div class="order_list_info_bottom_productPic">￥{{order_detail.money}}</div>
								<div style="clear: both;"></div>
								
								
								<div class="text_line">地址：{{order_detail.address}}</div>
								<div class="text_line">订单状态：{{order_detail.status|status_to_name}}</div>
								<div class="text_line">创建时间：{{order_detail.createtime|time_to_date}}</div>
								<div class="text_line">收货人：{{order_detail.name}}</div>
						 
								
							 
							</div>
		 
 

			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			
			
			Vue.filter("time_to_date", function(t) {
				 
				 return util.date_format(t*1000);
			})
			
			
			Vue.filter("status_to_name", function(status) {
				//状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭）） 
				switch(status) {
					case 1:
						return "待付款"
						break;
					case 2:
						return "待发货"
						break;
					case 3:
						return "待收货"
						break;
					case 4:
						return "已完成"
						break;

					default:
						break;
				}
			})
			var app = new Vue({
				el: '#order',
				data: {			 
					order_detail:''
				},
				methods: {
					removeOrder: function(index) {
						this.daifu.splice(index, 1);
					},
					get_order_detail: function(order_id, cb) {
						/*
						 
						 * arguments
						 * 		uid	用户ID
						 * 		status 订单状态
						 * 		cb 成功回调，将订单列表数据作为回调参数
						 * 		
						 * */

						$.ajax({
							type: 'get',
							url: 'https://zhapp.4hl.cn/api/order/getOneOrder',
							data: {
								orderid: order_id,

							},
							success: function(res) {
								if(typeof res == 'string') {
									res = JSON.parse(res)
								}
								if(res.code == 1) {
									cb(res.data)
								} else {
									if(window.plus) {
										plus.nativeUI.closeWaiting();
										mui.alert('网络连接出现问题')
									}
								}
							},
							error: function() {
								if(window.plus) {
									plus.nativeUI.closeWaiting();
									mui.alert('网络连接出现问题')
								}

							}
						})
					},
					up_data: function(order_id) {
						var that = this;

						console.log(order_id)
						if(window.plus) {
							plus.nativeUI.showWaiting('加载中');
						}
						this.get_order_detail(order_id, function(data) {
							console.log('订单详情', data)
							that.order_detail = data;
							if(window.plus) {
								plus.nativeUI.closeWaiting();
							}
						}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））

					},
					change_nav: function(k) {
						var status = k + 1;
						this.up_data(status, this.uid);
						this.now_nav_index = k + 1;

					},
					del_order: function() {

					}

				},
				created: function() {
					//初始化数据

					var order_id = util.GetQueryString('order_id');

					console.log(order_id);

					var that = this;

					this.up_data(order_id)
				},
				mounted: function() {
					mui.init({
						//				swipeBack: false
					});
				}
			})
		</script>

	</body>

</html>